<template>
  <div class="home" >
  <van-tabs animated>
  <van-tab v-for="category in categoryList"
  :title="category.name"
  :key="category.id"
  >
  </van-tab>
</van-tabs>

<!-- luobotu -->
<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
  <van-swipe-item v-for="banner in banners" :key="banner.id">
    <img :src="banner.imageUrl" class="swipe-image">
  </van-swipe-item>

</van-swipe>
  <van-divider>爆款商品</van-divider>
  <!-- 爆款list -->
  <!-- <van-pull-refresh v-model="refreshing" @refresh="onRefresh"> -->
  <van-list
    v-model="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
  >
  <!-- 商品卡片 -->
   <van-card
   v-for="item in baokuan"
   :key="item.id"
  :price="item.price"
  :origin-price="item.originPrice"
  :desc="item.rankingTag"
  :title="item.title"
  :thumb="item.image"
 @click="ToDetails(item.detailUrl)"
>
  <template v-slot:num>
    <div>月销{{item.saleNum}}<span><van-icon name="cart-o" color="#1989fa" size="1.3rem" @click.stop="handleAddToCart(item)"  /></span></div>
  </template>
  <template #desc>
    <div class="ranking">排行:{{item.rankingTag}}
    </div>
  </template>
</van-card>

  </van-list>
<!-- </van-pull-refresh> -->

  </div>
</template>

<script>
// import store from '@/store'
import { getCategories, getBanners, getBaoKuan } from '@/api/home'
export default {
  name: 'Home',
  data () {
    return {
      categoryList: [],
      baokuan: [],
      banners: [],
      loading: false,
      finished: false,
      refreshing: false,
      nextIndex: 0,
      isEnd: false
    }
  },
  async created () {
    const categories = await getCategories()
    this.categoryList = categories.list
    const banners = await getBanners()
    this.banners = banners.banners
    // const baokuan = await getBaoKuan(this.nextIndex)
    // this.baokuan = baokuan.list

    // fetch('http://www.xiongmaoyouxuan.com/api/tabs?sa=')
    //   .then(res => res.json())
    //   .then(data => console.log('数据：', data))
    // request
    //   .get('/api/tabs')
    //   .then(res => {
    //     console.log('axios打印的方法：', res)
    //     this.categoryList = res.list
    //   }) // res 传入request.js
    // //
    // axios.get('/duitang/napi/ad/banner/list/?ad_id=WEB001')
    //   .then(res => console.log(res))
  },
  methods: {
    // onLoad () {
    //   setTimeout(() => {
    //     if (this.refreshing) {
    //       this.baokuan = []
    //       this.refreshing = false
    //     }

    //     for (let i = 0; i < 10; i++) {
    //       this.baokuan.push(this.list.length + 1)
    //     }
    //     this.loading = false

    //     if (this.list.length >= 40) {
    //       this.finished = true
    //     }
    //   }, 1000)
    // }
    // onRefresh () {
    //   // 清空列表数据
    //   this.finished = false

    //   // 重新加载数据
    //   // 将 loading 设置为 true，表示处于加载状态
    //   this.loading = true
    //   this.onLoad()
    // }
    async onLoad () {
      const baokuan = await getBaoKuan(this.nextIndex)
      // this.baokuan = [...this.baokuan, ...baokuan.list]
      this.baokuan.push(...baokuan.list)
      this.nextIndex = baokuan.nextIndex
      this.finished = baokuan.isEnd
      this.loading = false
    },
    ToDetails (url) {
      this.$router.push({
        name: 'details',
        params: {
          id: url.slice(url.lastIndexOf('=') + 1)
        }
      })
    },
    handleAddToCart (prod) {
      // 结构对象属性
      const { id, image, title, price } = prod
      // 当前需要添加到购物车的商品对象
      const currentgoods = {
        id,
        image,
        title,
        price,
        num: 1
      }
      // 将当前的商品 保存 到 store 中的 state的 cart数组中，调用mutation 中的方法 需要用store的comit提交到
      console.log(currentgoods)
      // console.log(this.$store)
      this.$store.commit('addTocart', currentgoods) //
    }
  }
}
</script>

<style lang="less" scoped>

  .swipe-image{
      width: 100%;
      height: 100%;
    }
  .ranking{
    color: red;
  }
  .home{
    width: 100%;
    height: 100%;
    overflow: auto;
  }

</style>
